<template>
  	<div>
  		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<div class="navbar-header">
					<p class="navbar-brand">
						<router-link class="navbar-back" :to="{name:'application'}">
							<span class="glyphicon glyphicon-chevron-left"></span>
							返回
						</router-link>
					</p>
				</div>
				<router-link tag="nav" :to="{name:'account'}" class="navbar-account navbar-right">
					<div class="navbar-account__wrap clearfix">
						<div class="navbar-account__left">
							<span class="navbar-account__object">
								<img src="../../assets/logo.png" class="img-responsive img-circle" alt=""account />
							</span>
						</div>
						<div class="navbar-account__right">
							<span class="glyphicon glyphicon-chevron-right"></span>
						</div>
						<p class="navbar-account__body">杭州快美广告有限公司</p>
					</div>
				</router-link>
				<div class="navbar-search">
					<div class="input-group box-search">
						<input type="text" class="form-control" v-model="key" @keyup.enter="search()" placeholder="键入订单编号可以快速检索">
						<div class="input-group-addon" @click.stop="search()">
							<span class="glyphicon glyphicon-search"></span>
						</div>
					</div>
				</div>
			</div>
		</nav>

		<div class="application-menu">
			<div class="container-fluid">
				<aside class="application-menu__aside text-left">
					<p class="application-menu__aside-title ">我的应用</p>
					<div class="application-menu__aside-list">
						<div class="list-group">
							<a class="list-group-item disabled"><i class="icon icon-apt"></i>应用管理</a>
							<router-link class="list-group-item" :to="{name:'overview'}" active-class="on">应用概览</router-link>
							<router-link class="list-group-item" :to="{name:'channel'}" active-class="on">渠道审核</router-link>
							<a class="list-group-item disabled"><i class="icon icon-data"></i>数据统计</a>
							<router-link class="list-group-item" :to="{name:'order'}" active-class="on">订单记录</router-link>
							<router-link class="list-group-item" :to="{name:'capital'}" active-class="on">资金流动</router-link>
							<router-link class="list-group-item" :to="{name:'notice'}" active-class="on">通知延时查询</router-link>
						</div>
					</div>
				</aside>
				<section class="application-menu__body">
					<div class="application-menu__wrap">
						<router-view></router-view>
					</div>
				</section>
			</div>
			
		</div>
  	</div>
</template>
<script>

	export default {
	    name:'application-detail',
	    data(){
	      return {
	      	key:''
	      }
	    },
	    methods:{
	    	search(){
	    		let that = this;
	    		console.log( that.key );
	    	}
	    }
	  }
</script>
<style lang="less">
	@import '../../assets/style/color';
	@import '../../assets/style/font';

	.navbar-back{
		width:140px;
		height: 60px;
		line-height: 60px;
		display: block;
		background: #fff;
		font-size:16px;
		color:@cl_444;
		text-align: left;
		text-indent: 13px;
		>.glyphicon{
			margin-right: 20px;
		}
	}
	.application-menu{
		>.container-fluid{
			position: relative;
		}
		.application-menu__aside{
			position: absolute;
			background: #fff;
			width:220px;
			height: 100%;
			left: 15px;
			border-right: 1px solid @cl_d9d9d9;
			text-indent: 20px;
		}
		.application-menu__body{
			padding-left: 220px;
			>.application-menu__wrap{
				width:100%;
				min-height: 600px;
				background: #fff;
			}
		}
		.application-menu__aside-title{
			font-size:20px;
			line-height: 65px;
			color:@cl_444;
			border-bottom:1px solid @cl_d9d9d9;
		}
		.list-group-item{
			padding:0;
			height: 45px;
			line-height: 45px;
			font-size:14px;
			color:@cl_444;
			text-indent: 60px;
			position: relative;
			&.disabled{
				font-size:16px;
				color:@cl_999;
			}
			&.on{
				background: @cl_d9d9d9;
			}
			.icon{
				position: absolute;
				width:20px;
				height: 20px;
				left: 20px;
    			top: 12px;
			}
		}
	}
	
</style>